<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 736px;
  background-color: #f2f5f7;
}

.avatar {
  width: 100%;
  height: 5rem;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f5f7;
  display: flex;
  padding: 10px;
}

.right {
  flex: 1;
  margin-left: 10px;

  p {
    margin-top: 5px;
  }
}

.serve {
  width: 100%;
  // height: 20rem;
  background-color: #ffffff;
  margin-top: 17px;
}

.choose {
  width: 100%;
  height: 2rem;
  padding: 10px 0px;
}

.Service_Selection {
  width: 100%;
  height: 5rem;
  margin-top: 20px;
  display: flex;
  // background: #39d167;

  li {
    width: 90%;
    height: 35px;
    float: left;
    text-align: center;
    line-height: 35px;
    margin-left: 10px;
    // border: 1px solid #dddddd;
  }
}

.Selection {
  width: 90%;
  height: 5rem;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;

  li {
    width: 90%;
    height: 35px;
    // border: 1px dashed #dddddd;
    margin-left: 20px;
    text-align: center;
    line-height: 35px;
    // background: #39d167;
  }
}

.phone {
  width: 100%;
  background: #ffffff;
  border: 1px dashed #dddddd;
  margin-top: 10px;
  padding-bottom: 10 px;
}

.Answer_the_call {
  width: 100%;
  display: flex;
  padding: 10px 0;

  .left {
    flex: 4;
  }

  .right {
    flex: 1;
  }
}

.Stacked_nails {
  width: 100%;
  height: 15rem;
  background-color: #ffffff;
  margin-top: 10px;

  p {
    margin-top: 10px;
    padding: 0 5px;
  }

  .anniu {
    position: fixed;
    // z-index: 888;
    bottom: 0px;
  }
}

.paybox {
  width: 100%;
  background-color: white;
  height: 5rem;
  position: fixed;
  bottom: 0;
  text-align: center;

  .paybutton {
    width: 90%;
    height: 3rem;
    border-radius: 0.1rem;
    border: none;
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: #31cd2c;
    color: white;
  }
}
.active{
  // color: #39d167;
  border:1px solid  #39d167;
  z-index: 9999;
}
.inp{
  width: 10.2rem;
  border:none;
  padding: 0 10px;
}
.img{
  width: 3.75rem;
   height: 3.75rem;
}
</style>
<template>
  <div class="bigbox">
    <van-nav-bar title="电话咨询" left-arrow class="vant_head" @click-left="onClickLeft" />
    <van-notice-bar left-icon="shield-o" :scrollable="false" text="重要:急重症不适合网上咨询，请立即前往当地医院就诊" />
    <div class="avatar">
      <div class="left"><img  :src="data.image" alt="" class="img"/></div>
      <div class="right">
        <p>
        <h4>{{data.name}}</h4>
        </p>
        <p>{{item.clinic_name}}&emsp;{{data.title}}</p>
      </div>
    </div>
    <div class="serve">
      <p class="choose" style="">服务选择</p>
      <div class="Service_Selection "   >
         <div v-for="(item, index) in phone" :key="index" style="width:50%;
    height: 40px;">
  <li   :class="active === index ? 'active' : ''"  @click="change(index)">{{item.Direct_telephone}}</li>
         </div>
      </div>
      <div v-show="show">你好</div>
      <hr />
      <p class="choose">服务类型</p>
      <div class="Selection">
        <div v-for="(item, index) in price" :key="index" style="width:50%;
    height: 40px;">
  <li   :class="newactive === index ? 'active' : ''"  @click="changeprice(index)">{{item.phoneprice}}</li>
         </div>
      </div>
    </div>
    <div class="phone">
      <div class="Answer_the_call">
        <p class="left">接听电话</p>
        <p class="right"><input type="text " class="inp" v-model="Call_me" placeholder="请输入您的手机号码" ></p>
      </div>
      <div style="margin-top: 10px;"> <van-notice-bar left-icon="shield-o" :scrollable="false" background="#fff6f2"
          text="请确保您填写的电话无欠费、停机或空号，以防无法通话" /></div>
    </div>
    <div class="Stacked_nails">
      <h4 style="margin-left: 10px;">买前必读</h4>
      <p><span>1.服务流程:</span><span style="color: red;">支付成功后，平台会在预约时间给您来电请注意接听</span></p>
      <p>2.因医生工作繁忙，可能更改预约时间，届时会第一时间通知您</p>
      <p>3.为保证咨询通话效率，建议事先准备好病情材料(如检
        查、患处照片)</p>
      <div class="paybox">
        <button class="paybutton" @click="pay">去支付</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { showToast } from 'vant'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import http from '@/http/axios'
import axios from 'axios'

const  route=useRoute()
const item=JSON.parse(route.query.item)
const data=ref([])
data.value=item
console.log(item.image);

const active=ref(0)
const newactive=ref(0)
const show=ref(false)
const Call_me=ref("")
const newprice=ref("")
const newpriceid=ref("")
const onClickLeft = () => {
  history.back()/*  */
}

const phone=ref([
  {Direct_telephone:'接听电话'},
  {Direct_telephone:'预约电话',}
])
const price=ref([
  {phoneprice:80,id:"1"},
  {phoneprice:120,id:"2"},
    {phoneprice:160,id:"3"},
  {phoneprice:240,id:"4"},
])
const change=(index)=>{
  console.log(index);
   active.value = index
  //  active.value==1?show.value=true:show.value=false;
}
const changeprice=(index)=>{
  console.log(index);
  console.log(price.value[index].id);
    console.log(price.value[index].phoneprice);
     newprice.value=price.value[index].phoneprice
      newpriceid.value=price.value[index].id
  newactive.value = index
}

const pay=async()=>{
  if(Call_me.value==''){
    showToast("请输入正确的手机号")
  }else{
    // console.log(newprice.value,newpriceid.value);
       axios.get('/addres/pay',{params:{ price:newprice.value,id:newpriceid.value}}).then(res=>{
    console.log(res.data.result);
  })
  }
}
</script>
